import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';
import { Button } from 'antd';

export default function Echarts() {

    const mainRef = useRef()

    const myChart = useRef()

    useEffect(() => {
        // 基于准备好的dom，初始化echarts实例
        myChart.current = echarts.init(mainRef.current);
        // 绘制图表
        changeCartData({
            type: 'pie'
        })
    }, [])
    function changeCart() {
        changeCartData({
            type: 'bar',
            data: [10, 49, 54, 24, 63, 92]
        })
    }

    function changeCartData(config) {
        myChart.current.setOption({
            title: {
                text: 'ECharts 入门示例',
                link: 'https://www.baidu.com',
                textStyle: {
                    color: '#f66'
                },
                show: true,
                backgroundColor: '#ccc',
                subtext: '啊哈哈哈',
                shadowColor: 'rgba(255, 0, 0, 0.8)',
                shadowBlur: 10
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', {
                    value: 'T恤',
                    textStyle: {
                        color: '#f66'
                    }
                }, '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: config.type,
                    data: config.data ? config.data : [5, 20, 36, 50, 10, 10, 20]
                }
            ]
        });
    }


    return (
        <div>
            <Button onClick={changeCart}>改为柱状图</Button>
            <div style={{ height: 450, width: '90%' }} ref={mainRef} id='main'></div>
        </div>
    )
}
